<template>
    <view>
        <!-- orderSub/pages/useCoupon/useCoupon.wxml -->
        <view v-if="couponList.length > 0">
            <!-- <view class="tip1">单笔订单可使用<text>3种</text>券，每种券可使用<text>1张</text></view> -->
            <view class="tip1">
                单笔订单可使用
                <text>1张</text>
                券
            </view>
            <view class="demo">
                <view class="couponBox" v-for="(item, index) in couponList" :key="index">
                    <image v-if="item.status == 0" src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/CheckLine_bg.png" class="img"></image>

                    <image v-if="item.status == 1" src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/line_bg.png" class="img"></image>

                    <image v-if="item.status > 1" src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/historyCardVoucher.png" class="img"></image>

                    <view class="info">
                        <view class="left">
                            <view class="money">
                                ￥
                                <text>{{ item.couponBalance / 100 }}</text>
                            </view>
                            <view class="useType">{{ item.useType == 'QuanChang' ? '全场通用' : '指定站点' }}</view>
                        </view>
                        <view class="right">
                            <view :class="item.status > 1 ? 'txt1_no' : 'txt1'">
                                <view v-if="item.couponType == 'FuWuFei'">服务费券</view>
                                <view v-if="item.couponType == 'DianFei'">电费券</view>
                                <view v-if="item.couponType == 'XianJin'">现金券</view>
                                <image
                                    @tap="parseEventDynamicCode($event, item.status > 1 ? '' : 'checkCoupon')"
                                    :data-item="item"
                                    :src="item.status > 1 ? 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/checkbox_disable.png' : item.status == 1 ? 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/checkbox.png' : 'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/checkbox_sel.png'"
                                ></image>
                            </view>
                            <view :class="item.status > 1 ? 'txt2_no' : 'txt2'">满{{ item.limiBalance / 100 }}可用</view>
                            <view class="validity_date"><image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/icon1.png"></image>{{ item.startTime }}</view>
                            <view class="validity_date"><image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/icon2.png"></image>{{ item.endTime }}</view>
                        </view>
                    </view>

                    <view class="statusDesc" v-if="item.status > 1">
                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/tip1.png" class="img"></image>
                        <view class="desc">
                            <text>不可用原因：</text>
                            {{ item.statusDesc }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="fotBtn">
                <view class="tip2">
                    已选
                    <a class="txt1">{{ num }}张</a>
                    ，可减
                    <a class="txt2">￥{{ deductionAmount }}</a>
                    <a class="txt3" v-if="item.status == 0" v-for="(item, index) in couponList" :key="index">
                        （{{ item.couponType == 'FuWuFei' ? '服务费￥' + item.couponBalance / 100  : ''
                        }}{{ item.couponType == 'DianFei' ? '电费￥' + item.couponBalance / 100 : ''
                        }}{{ item.couponType == 'XianJin' ? '现金￥' + item.couponBalance / 100  : '' }}）
                    </a>
                    <!-- <a class="txt3">电费￥2,</a><a class="txt3">现金￥2</a> -->
                </view>
                <view class="btn" @tap="enterCoupon">确定</view>
            </view>
        </view>
        <view v-else>
            <upgrading text="暂无优惠券"></upgrading>
        </view>
    </view>
</template>

<script>
'use strict';
import upgrading from '../../../components/upgrading/upgrading';

// exports.__esModule = true; // orderSub/pages/useCoupon/useCoupon.ts

var https_1 = require('./../../../api/https.js');
export default {
    components: {
        upgrading
    },
    data() {
        return {
            billId: 0,
            couponList: [],
            cIdStr: '',
            num: '',
            deductionAmount: '',
            deductibleBalance: '',
            couponIdStr: '',
            money: '',
            couponType: '',
            deductibleBalanceCoupon: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        if (options.billId) {
            this.setData({
                billId: options.billId
            });
        }

        if (options.couponIdStr) {
            this.setData({
                cIdStr: options.couponIdStr
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getCouponRecodeByBill();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        //获取优惠券列表
        getCouponRecodeByBill: function () {
            var that = this;
            https_1
                .getCouponRecodeByBill({
                    billId: this.billId
                })
                .then(function (res) {
                    if (res.code == 0) {
                        var data = res.data;
                        var cIdStr_1 = that.cIdStr;
                        var num_1 = 0;
                        var deductionAmount_1 = 0;
                        data.forEach(function (element) {
                            if (cIdStr_1 == element.id) {
                                element.status = 0;
                            } else {
                                if (cIdStr_1) {
                                    if (element.status == 0) {
                                        element.status = 1;
                                    } else {
                                        element.status = element.status;
                                    }
                                }
                            }

                            if (element.status == 0) {
                                deductionAmount_1 += element.couponBalance / 100;
                                num_1++;
                            }
                        });
                        that.setData({
                            couponList: res.data,
                            num: num_1,
                            deductionAmount: deductionAmount_1
                        });
                    }
                });
        },

        //选择优惠券
        checkCoupon: function (e) {
            var id = e.currentTarget.dataset.item.id;
            var list = this.couponList;
            list.forEach(function (element) {
                var count = 0;

                if (element.id == id) {
                    element.status = 0;
                    // if (element.status == 0) {
                    //     element.status = 1;
                    // }
                    // else {
                    //     element.status = 0;
                    // }
                    // list.forEach(function (e) {
                    //     if (e.status == 0) {
                    //         count++;
                    //     }
                    // });

                    // if (count == 2) {
                    //     element.status = 1;
                    //     uni.showModal({
                    //         title: '信息提示',
                    //         content: '只可使用一张',
                    //         showCancel: false
                    //     });
                    // }
                     // list.forEach((e:any) => {
                    //   if(e.status==element.status&&e.couponType==element.couponType){
                    //     count++
                    //   }
                    // });
                    // if(count==2&&element.status==0){
                    //   element.status=1
                    //   wx.showModal({
                    //     title: '信息提示',
                    //     content: '每种券只可使用一张',
                    //     showCancel:false,
                    //   })
                    // }
                }else{
                    if(element.status<=1){
                        element.status = 1;
                    }
                }
            });
            var num = 0;
            var deductionAmount = 0;
            list.forEach(function (element) {
                if (element.status == 0) {
                    deductionAmount += element.couponBalance / 100;
                    num++;
                }
            });
            this.setData({
                couponList: list,
                num: num,
                deductionAmount: deductionAmount
            });
        },

        //确定使用优惠券
        enterCoupon: function () {
            var that = this;
            var couponIdStr = '';
            var money = 0;
            var deductibleBalanceCoupon = 0;
            var couponType = '';
            var list = this.couponList;
            var noCheck = false;
            list.forEach(function (element) {
                if (element.status == 0) {
                    couponIdStr += element.id + ',';
                    money += parseFloat((element.couponBalance / 100).toFixed(2));
                    couponType = element.couponType;
                }
            });
            list.forEach(function (e) {
                if (e.status <= 1) {
                    if (couponIdStr == '') {
                        uni.showModal({
                            title: '信息提示',
                            content: '请选择优惠券',
                            showCancel: false
                        });
                        noCheck = true;
                    }
                }
            });

            if (noCheck) {
                return false;
            }

            var reg = /,$/gi;
            couponIdStr = couponIdStr.replace(reg, '');
            uni.showLoading({
                title: '加载中...',
                mask: true
            });
            https_1
                .getDeductibleBalance({
                    id: this.billId,
                    couponIdStr: couponIdStr
                })
                .then(function (res) {
                    if (res.code == 0) {
                        deductibleBalanceCoupon = res.data;
                        that.setData({
                            deductibleBalance: (deductibleBalanceCoupon / 100).toFixed(2)
                        });
                    }

                    uni.hideLoading();
                    var pages = getCurrentPages(); //当前页面

                    var prevPage = pages[pages.length - 2]; //上一页面

                    prevPage.setData({
                        //直接给上一个页面赋值
                        couponIdStr: couponIdStr,
                        money: money,
                        couponType: couponType,
                        deductibleBalanceCoupon: (deductibleBalanceCoupon / 100).toFixed(2)
                    });

                    // prevPage.couponIdStr = couponIdStr
                    // prevPage.money = money
                    // prevPage.couponType = couponType
                    // prevPage.deductibleBalanceCoupon = (deductibleBalanceCoupon / 100).toFixed(2)
                  
                    uni.navigateBack({
                        delta: 1
                    });
                })
                ['catch'](function () {
                    uni.hideLoading();
                });
        }
    }
};
</script>
<style lang="less">
@import url(../../../commin/commin.less);  /* orderSub/pages/useCoupon/useCoupon.wxss */
page {
    background-color: @text-color6;
}
.tip1 {
    text-align: center;
    .fontsize (28rpx);
    .margins (39rpx,0,36rpx,0);
    font-family: PingFang SC;
    font-weight: 500;
    color: @text-color3;
    text {
        color: @orange;
        .fontsize (30rpx);
    }
}
.demo {
    padding-bottom: 240rpx;
}
.couponBox {
    .margins (0,12rpx,0rpx,12rpx);
    .img {
        .kuangao (726rpx,220rpx);
    }
    .info {
        position: absolute;
        display: flex;
        .left {
            width: 230rpx;
            text-align: center;
            margin-left: 10rpx;
            margin-top: -196rpx;
            .money {
                .fontsize (34rpx);
                font-family: PingFang SC;
                font-weight: bold;
                color: @white-color;
                text {
                    .fontsize (72rpx);
                }
            }
            .useType {
                .fontsize (26rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @white-color;
            }
        }
        .right {
            margin-left: 50rpx;
            margin-top: -200rpx;
            .txt1 {
                .fontsize (34rpx);
                font-family: PingFang SC;
                font-weight: bold;
                color: @text-color2;
                display: flex;
                align-items: center;
                image {
                    .kuangao (32rpx,32rpx);
                    position: absolute;
                    right: -60rpx;
                }
            }
            .txt1_no {
                .fontsize (34rpx);
                font-family: PingFang SC;
                font-weight: bold;
                display: flex;
                align-items: center;
                color: @text-color3;
                image {
                    .kuangao (32rpx,32rpx);
                    position: absolute;
                    right: -60rpx;
                }
            }
            .txt2 {
                .fontsize (26rpx);
                .margins (18rpx,0,10rpx,0);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color1;
            }
            .txt2_no {
                .fontsize (26rpx);
                .margins (18rpx,0,12rpx,0);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;
            }
            .txt3 {
                .fontsize (24rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;
                width: 342rpx;
            }
            .validity_date{
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #606266;
                image{
                width: 18rpx;
                height: 18rpx;
                display: inline-block;
                margin-right: 7rpx;
                }
            }
        }
    }
    .statusDesc {
        display: flex;
        margin-bottom: 16rpx;
        .img {
            .kuangao (32rpx,32rpx);
            .margins (0,10rpx,0,12rpx);
        }
        .desc {
            .fontsize (26rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color1;
            text {
                color: @orange;
            }
        }
    }
}
.fotBtn {
    position: fixed;
    bottom: 0;
    background-color: @text-color6;
    height: 137rpx;
    .paddings (20rpx,35rpx,53rpx,35rpx);
    .tip2 {
        // display: flex;
        text-align: center;
        .fontsize (28rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color1;
        .txt1 {
            color: @blue;
        }
        .txt2 {
            .fontsize (30rpx);
            font-family: DIN-Bold;
            font-weight: Bold;
            color: orange;
        }
        .txt3 {
            color: @text-color3;
        }
        a{
            display: inline-block
        }
    }
    .btn {
        .kuan (680rpx);
        line-height: 88rpx;
        margin-top: 24rpx;
        text-align: center;
        background: linear-gradient(105deg, #2b99ff, #1b8cf5);
        box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
        border-radius: 44rpx;
        .fontsize (30rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @white-color;
    }
}
</style>
